<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>清分</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <style>
        html, body, #app {
            height: 100%;
            overflow: hidden;
        }

        .search-iput-box {
            position: absolute;
            left: 3rem;
            right: 4rem;
            bottom: 0.5rem;
            padding: 0 1rem;
        }

        .search-iput-box input {
            margin-bottom: 0;
            border-radius: 3rem;
            border: none;
            background-color: #F8F8F8;
        }

        .dialog-content .confirm-input{
            margin-bottom: 0;
            border-radius: 5px;
            border: none;
            background-color: #F8F8F8;
        }

        /*右侧添加按钮*/
        .right-plus {
            position: absolute;
            right: 1rem;
            top: 4rem;
            padding: 0 1rem;
        }

        .tab-box {
            height: 4.5rem;
            position: absolute;
            top: 7rem;
            width: 100%;
            background: #fff;
            line-height: 4rem;
            display: flex;
            border-bottom: 1px solid #F3F3F3;
        }

        .selected-line.left {
            position: absolute;
            top: 2.5rem;
            left: 20%;
            width: 4rem;
            height: 2px;
            background-color: #7DD272;
        }

        .selected-line.right {
            position: absolute;
            top: 2.5rem;
            right: 20%;
            width: 4rem;
            height: 2px;
            background-color: #7DD272;
        }

        .tab-box-item {
            flex: 1;
        }

        .content-layer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 11.5rem;
            background-color: #F3F3F3;
            overflow: auto;
            border-radius: 5px;
        }

        .qf-task-card {
            width: 95%;
            margin: 10px auto 0;
            background-color: #fff;
            box-shadow: 0 0 0 0 #6B6B6B;
            border-radius: 5px;
            position: relative;
        }

        .qf-task-card:last-child {
            margin-bottom: 20px;
        }

        .qf-card-time {
            padding-top: 10px;
            padding-right: 10px;
            font-size: 1.33rem;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
            text-align: right;
        }

        .left-triangle {
            position: absolute;
            left: 0;
            top: 0;
            width: 2rem;
        }

        .left-triangle img {
            height: 3rem;
        }

        .qf-title {
            font-size: 1.8rem;
            font-weight: 400;
            color: #666;
        }

        .qf-sub-title {
            padding: 5px 0;
            font-size: 1.4rem;
            font-weight: normal;
            color: #999;
        }

        .qf-card-context-box {
            padding: 10px 10px 0;
        }

        .qf-zhang-title-label {
            margin-top: 2px;
            font-size: 1.5rem;
            font-weight: normal;
            color: #999;
        }

        .qf-zhang-title-text {
            color: #65C459;
        }

        .qf-zhang-title-text.error {
            color: #EF6060;
        }

        .qf-zhang-box {
            margin-top: 10px;
        }

        .qf-position {
            position: relative;
            margin: 10px 0;
            color: #999;
            font-size: 1.2rem;
            font-weight: lighter;
            padding-bottom: 10px;
        }

        .qf-position-icon {
            width: 1rem;
            vertical-align: middle;
        }

        .qf-operation {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .qf-operation img {
            width: 4rem;
            margin-left: 10px;
        }

        .qf-confirm {
            border-top: 1px solid #F3F3F3;
            overflow: hidden;
        }

        .qf-ok-btn {
            width: 9rem;
            margin: 10px auto;
            text-align: center;
            color: #7DD272;
            border-radius: 3rem;
            border: 1px solid #7DD272;
            padding: 5px 10px;
        }

        .qf-content-top {
            background-color: #65C459;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
        }

        .qf-content-top .qf-card-time, .qf-content-top .qf-title, .qf-content-top .qf-sub-title {
            color: #fff;
        }

        .qf-content-bottom {
            padding: 10px 10px 20px;
            font-size: 1.5rem;
        }

        .qf-result-error {
            margin-top: 15px;
            color: #EF6060;
        }
        .header-nav.qf-header{
            border: none;
        }
        .no-data{
            position: fixed;
            left: 0;
            width: 100%;
            bottom: 50px;
            font-size: 15px;
            color: #999;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header-nav qf-header">
        <div class="search-iput-box"><input type="text" onkeydown="if(event.keyCode==13){vm.refresh(vm.orderType);}" v-model="atmCode"  placeholder="请输入机具编号查找"></div>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
        <div class="right-plus" @click="goAdd"><img style="width: 2rem" src="../../../img/common/btn_plus.jpg" alt="">
        </div>
        <div class="tab-box">
            <div @click="refresh('dealing')"  class="tab-box-item">
                <div>未完成</div>
                <div v-show="orderType == 'dealing'" class="selected-line left"></div>
            </div>
            <div @click="refresh('history')" class="tab-box-item">
                <div>已完成</div>
                <div v-show="orderType == 'history'" class="selected-line right"></div>
            </div>
        </div>
    </div>

    <div id="scrollId" @scroll="handleScroll" class="content-layer">

        <!--未完成-->
        <div class="qf-task-card" v-for=" item in orderList.dealing.list" :key="item.id" v-if="orderType == 'dealing'">
            <!--右侧时间-->
            <div class="qf-card-time">{{item.createTime | dataFormatYear}}</div>
            <!--默认-->

            <!--左侧图表-->
            <div class="left-triangle">
                <img v-if="item.signStatus == 1" src="../../../img/order/qingfen/ic_done@3x.png" alt="">
                <img v-if="item.signStatus == 2" src="../../../img/order/qingfen/ic_fault@3x.png" alt="">
            </div>
            <div class="qf-card-context-box">
                <div class="qf-title">
                    {{item.atmInsSide}}的{{item.atmTypeName}}({{item.atmModelCode}})
                </div>
                <div class="qf-sub-title">
                    机具编号：{{item.atmCode}}| 批次：{{item.batchNum}}
                </div>
                <!--默认-->
                <template v-if="item.signStatus == 0">
                    <div class="qf-zhang-box">
                        <div v-if="item.billMoneyStatus == 'show'">
                            <div class="qf-zhang-title-label "
                                 v-if="hasValue(item.billUsr1Money)">
                                账务金额({{item.billUsr1Name}})：<span>{{item.billUsr1Money}}元</span>
                            </div>
                            <div class="qf-zhang-title-label "
                                 v-if="hasValue(item.billUsr2Money)">
                                账务金额({{item.billUsr2Name}})：<span>{{item.billUsr2Money}}元</span>
                            </div>
                        </div>
                        <div v-if="item.billMoneyStatus == 'hide'">
                            <div class="qf-zhang-title-label " v-if="hasValue(item.billUsr1Money)">
                                账务金额 ({{item.billUsr1Name}})：<span>*****</span>
                            </div>
                            <div class="qf-zhang-title-label " v-if="hasValue(item.billUsr2Money)">
                                账务金额 ({{item.billUsr2Name}})：<span>*****</span>
                            </div>
                        </div>

                        <div class="qf-zhang-title-label" v-if="hasValue(item.clearMoney)">
                            清分金额({{item.clearUsrName}})：<span class="qf-zhang-title-text"
                                                              :class="{'error': item.signStatus == 2}">{{item.clearMoney}}元</span>
                        </div>
                    </div>
                </template>

                <!--对勾-->
                <template v-if="item.signStatus == 1">
                    <div class="qf-zhang-box">
                        <!--两个都一样-->
                        <div class="qf-zhang-title-label "
                             v-if="hasValue(item.billUsr1Money) && hasValue(item.billUsr2Money) && item.billUsr1Money == item.billUsr2Money">
                            账务金额：<span class="qf-zhang-title-text">{{item.billUsr1Money}}元</span>
                        </div>
                        <!--1有值 2没有-->
                        <div class="qf-zhang-title-label "
                             v-if="hasValue(item.billUsr1Money) && !hasValue(item.billUsr2Money)">
                            账务金额({{item.billUsr1Name}})：<span class="qf-zhang-title-text">{{item.billUsr1Money}}元</span>
                        </div>
                        <div class="qf-zhang-title-label" v-if="hasValue(item.clearMoney)">
                            清分金额({{item.clearUsrName}})：<span class="qf-zhang-title-text"
                                                              :class="{'error': item.signStatus == 2}">{{item.clearMoney}}元</span>
                        </div>
                    </div>
                </template>
                <!--红色-->
                <template v-if="item.signStatus == 2">
                    <div class="qf-zhang-box">
                        <template
                                v-if="hasValue(item.billUsr1Money) && hasValue(item.billUsr2Money) && item.billUsr1Money == item.billUsr2Money">
                            <div class="qf-zhang-title-label " v-if="hasValue(item.billUsr1Money)">
                                账务金额：<span class="qf-zhang-title-text error">{{item.billUsr1Money}}元</span>
                            </div>
                        </template>
                        <template v-else>
                            <div class="qf-zhang-title-label "
                                 v-if="hasValue(item.billUsr1Money)">
                                账务金额({{item.billUsr1Name}})：<span
                                    class="qf-zhang-title-text error">{{item.billUsr1Money}}元</span>
                            </div>
                            <div class="qf-zhang-title-label "
                                 v-if="hasValue(item.billUsr2Money)">
                                账务金额({{item.billUsr2Name}})：<span
                                    class="qf-zhang-title-text error">{{item.billUsr2Money}}元</span>
                            </div>
                        </template>

                        <div class="qf-zhang-title-label" v-if="hasValue(item.clearMoney)">
                            清分金额({{item.clearUsrName}})：<span
                                class="qf-zhang-title-text error">{{item.clearMoney}}元</span>
                        </div>
                    </div>
                </template>
                <div class="qf-position">
                    <img @click="goMap(item.xCode,item.yCode)"  class="qf-position-icon" src="../../../img/common/ic_location.png" alt=""> {{item.atmAddress}}
                    <div class="qf-operation">
                        <img v-if="item.delButtonStatus == 'show'" @click="dealDelete(item.id)" src="../../../img/order/qingfen/btn_delete@3x.png" alt="">
                        <img v-if="item.editButtonStatus == 'show'" @click="dealUpdate(item.id)" src="../../../img/order/qingfen/btn_edit@3x.png" alt="">
                    </div>
                </div>

                <div class="qf-confirm" v-if="item.auditButtonStatus == 'show'">
                    <div @click="dealConfirm(item.id)" class="qf-ok-btn">核对完成</div>
                </div>

            </div>


        </div>

        <!--历史-->
        <div class="qf-task-card" v-for=" item in orderList.history.list" :key="item.id" v-if="orderType == 'history'">
            <div class="qf-content-top" style="padding-top: 0">
                <!--右侧时间-->
                <div class="qf-card-time">{{item.createTime | dataFormatYear}}</div>
                <!--默认-->

                <!--左侧图表-->
                <div class="left-triangle">
                    <img v-if="item.auditStatus == 1"  src="../../../img/order/qingfen/ic_fault@3x.png" alt="">
                </div>

                <div class="qf-title">
                    {{item.atmInsSide}}的{{item.atmTypeName}}({{item.atmModelCode}})
                </div>
                <div class="qf-sub-title">
                    机具编号：{{item.atmCode}}| 批次：{{item.batchNum}}
                </div>
            </div>
            <div class="qf-content-bottom">
                <div>
                    清分人员：{{item.clearUsrName}} {{item.clearMoney}} 元
                </div>
                <div>
                    账务人员：{{item.billUsr1Name}} ，{{item.billUsr2Name}} {{item.billUsr1Money}}元
                </div>
                <div class="qf-result-error" v-if="item.auditStatus=='1'">
                    {{item.auditRemark}}
                </div>
            </div>
        </div>
        <div v-if="orderList[orderType].list.length == 0" class="no-data">暂无数据</div>
    </div>
    <!-- 删除确认-->
    <xlb-modal v-model="tipMod">
        <div class="dialog-content" slot="content">删除清分订单，是否继续？</div>
        <div slot="footer-left">取消</div>
        <div @click="doDelete" slot="footer-right">继续</div>
    </xlb-modal>

    <!-- 填写金额-->
    <xlb-modal v-model="writeTextMod">
        <div class="dialog-content" slot="content">
            <input class="confirm-input" v-model="billMoney" type="text"  placeholder="请输入金额">
        </div>
        <div slot="footer-left">取消</div>
        <div @click="doUpdate" slot="footer-right">提交</div>
    </xlb-modal>

    <!-- 填写核对理由-->
    <xlb-modal v-model="writeReasonMod">
        <div class="dialog-content" slot="content">
            <textarea rows="3" v-model="writeReasonText" class="confirm-input" placeholder='请填写核对理由'></textarea>
        </div>
        <div slot="footer-left">取消</div>
        <div @click="doConfirm" slot="footer-right">确认通过</div>
    </xlb-modal>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selectedId:'',
            atmCode: '',
            tipMod:false,
            writeTextMod:false, // 填写金额modal
            billMoney:null, // 填写金额
            writeReasonMod: false,
            writeReasonText: null,
            orderType: 'dealing',
            loadingFlag: false,
            test: {
                clientHeight: '',
            },
            scrollData: {
                top: 0
            },
            skipDown: false,
            orderList: {
                // 未完成
                dealing: {
                    pageParams: {
                        pageSize: 5,
                        pageNo: 1,
                        billStatus: '0'
                    },
                    list: [],
                    count: 0,
                },
                // 已完成
                history: {
                    pageParams: {
                        pageSize: 20,
                        pageNo: 1,
                        billStatus: '1'
                    },
                    list: [],
                    count: 0,
                }
            },
        },
        methods: {
            // 判断是否有值
            hasValue: function(val){
                return (val != null )&& (val !== '') && ( val+'' >= 0);
            },
            goMap: function (xCode, yCode) {
                goMapPage(xCode, yCode, 0);
            },
            // 添加
            goAdd: function () {
                return redirect('pages/order/qingfen/addNav.html');
            },
            // 填写
            dealUpdate: function(id){
                this.billMoney = null;
                this.writeTextMod = true;
                this.selectedId = id;
            },
            // 确认填写
            doUpdate: function(){
                if(!this.billMoney){
                    return mui.toast('请填写金额！');
                }
                if(!checkInputMoneyIsOk(this.billMoney)){
                    return mui.toast('输入金额格式有误，请重新输入！');
                }
                Resource.post(QING_FEN_SAVE_MONENY_ORDER_BILL, {id: this.selectedId, billMoney: this.billMoney}, function (res) {

                    mui.toast("填写成功！");
                    vm.refresh(vm.orderType);
                    vm.writeTextMod = false;
                },{}, function () {
                    vm.writeTextMod = false;
                    vm.refresh(vm.orderType);
                })
            },
            // 删除
            dealDelete: function(id){
                this.tipMod = true;
                this.selectedId = id;
            },
            // 确认删除
            doDelete: function(){
                Resource.post(QING_FEN_DEL_ORDER_BILL, {id: this.selectedId}, function (res) {
                    mui.toast("删除成功！");
                    vm.refresh(vm.orderType);
                    vm.tipMod = false;
                },{}, function () {
                    vm.tipMod = false;
                    vm.refresh(vm.orderType);
                })
            },
            // 核对
            dealConfirm: function(id){
                this.writeReasonText = null;
                this.writeReasonMod = true;
                this.selectedId = id;
            },
            // 确认
            doConfirm: function(){
                if(!this.writeReasonText){
                    return mui.toast('请填写核对理由！');
                }
                Resource.post(QING_FEN_AUDIT_MONENY_ORDER_BILL, {id: this.selectedId, auditRemark: this.writeReasonText}, function (res) {
                    mui.toast("操作成功！");
                    vm.refresh(vm.orderType);
                    vm.writeReasonMod = false;
                }, {},function () {
                    vm.writeReasonMod = false;
                    vm.refresh(vm.orderType);
                })
            },
            handleScroll: function (e) {

                this.test.clientHeight = document.getElementById('scrollId').clientHeight;
                this.test.offsetHeight = document.getElementById('scrollId').offsetHeight;
                this.test.scrollHeight = document.getElementById('scrollId').scrollHeight;
                this.test.scrollTop = document.getElementById('scrollId').scrollTop;

                var dom = document.getElementById('scrollId');
                var clientHeight = dom.clientHeight;
                var offsetHeight = dom.offsetHeight;
                var scrollHeight = dom.scrollHeight;
                var scrollTop = dom.scrollTop;

                if (this.scrollData.top - scrollTop > 0) {
                    // console.log("向下滑动")
                    //vm.skipDown = false;

                } else if (this.scrollData.top - scrollTop < 0) {
                    // console.log("向上滑动")
                    vm.skipDown = true;
                }
                if (scrollTop == 0) {
                    console.log("刷新页面。。。")
                    vm.skipDown = false;
                    // this.loadingFlag = true;
                    // setTimeout(function () {
                    //     vm.loadingFlag = false
                    // }, 1000)
                    vm.refresh(vm.orderType);
                } else if (scrollTop == (scrollHeight - offsetHeight)) {
                    console.log("加载更多。。。。。")
                    vm.appendOrderList(vm.orderType);
                }

                this.scrollData.top = scrollTop;

            },
            //加载订单列表
            loadOrderList: function (type) {
                this.searchFlag = false;
                this.bottomTitle = '点击加载更多';
                switch (type) {
                    case 'dealing':
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(QING_FEN_LIST_ORDER_BILL, params, function (res) {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                            vm.orderList.dealing.list = res.list;
                            vm.orderList.dealing.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                        }, function () {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                        })
                        break;
                    case 'history':
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(QING_FEN_LIST_ORDER_BILL, params, function (res) {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                            vm.orderList.history.list = res.list;
                            vm.orderList.history.count = res.count;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                        }, function () {
                            vm.loadingFlag = false;
                            vm.searchFlag = true;
                        })
                        break;
                    default:

                }
            },
            //追加订单
            appendOrderList: function (type) {
                switch (type) {
                    case 'dealing':
                        this.orderList.dealing.pageParams.pageNo++;
                        var params = this.orderList.dealing.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(QING_FEN_LIST_ORDER_BILL, params, function (res) {
                            vm.loadingFlag = false;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.dealing.list = vm.orderList.dealing.list.concat(res.list);
                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    case 'history':
                        this.orderList.history.pageParams.pageNo++;
                        var params = this.orderList.history.pageParams;
                        params.atmCode = this.atmCode;
                        this.loadingFlag = true;
                        Resource.get(QING_FEN_LIST_ORDER_BILL, params, function (res) {
                            vm.loadingFlag = false;
                            if (res.list.length == 0) {
                                //mui.toast('没有更多了');
                                vm.bottomTitle = '没有更多了';
                                return;
                            }
                            vm.orderList.history.list = vm.orderList.history.list.concat(res.list);
                        }, function () {
                            vm.loadingFlag = false;
                        })
                        break;
                    default:

                }
            },
            //刷新页面
            refresh: function (type) {
                this.orderType = type;
                this.orderList[type].pageParams.pageNo = 1;
                this.loadOrderList(type)
            },
        }
    });
    mui.plusReady(function () {
        vm.refresh(vm.orderType);
    })
    document.addEventListener('changeTab', function () {
        vm.refresh(vm.orderType);

    })

</script>
</body>
</html>
